<template>
    <!-- 表格分页组件 -->
    <div class="paginations">
        <el-pagination
        v-model:current-page="pagination.currentPage"
        v-model:page-size="pagination.pageSize"
        :page-sizes="[10, 20, 30, 50, 100]"
        :small="pagination.small"
        :disabled="pagination.disabled"
        :background="pagination.background"
        layout="total, sizes, prev, pager, next"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        />
    </div>
</template>
<script lang="ts" setup>
interface Props {
  total?: number //总条数
}
interface Page {
  currentPage: number, //当前页
  pageSize: number, //每页条数
  small?: boolean, //是否使用小型分页样式
  disabled?: boolean, //是否禁用分页
  background?: boolean //是否为分页按钮添加背景色
}
//接受父组件传值
defineProps<Props>();
//使用defineEmits注册一个自定义事件
const emit = defineEmits([
  "currentChange"
]);
const pagination = reactive<Page>({
  currentPage: 1,
  pageSize: 10,
  small: false,
  disabled: false,
  background: false
});
//page-size 改变时触发
const handleSizeChange = (val: number) => {
  pagination.pageSize = val;
  emit('currentChange',pagination);
}
//current-page 改变时触发
const handleCurrentChange = (val: number) => {
  pagination.currentPage = val;
  emit('currentChange',pagination);
}

//暴露给父组件的属性
defineExpose({
  pagination
})
</script>
<style lang="scss" scoped>
.paginations {
    width: 100%;
    height: auto;
    padding: 10px 0 0 0;
}
</style>